<template>
  <Card class="mb-6">
    <div>
      <user-info></user-info>
      <div
        class="call-me flex h-[34px] justify-center items-center bg-blue-400 text-white cursor-pointer duration-300 relative"
      >
        <div class="flex items-center">
          <div class="mr-2 text-lg">
            <svg-icon icon-class="github"></svg-icon>
          </div>
          <span>联系我</span>
        </div>
      </div>
    </div>
  </Card>
</template>

<style lang="scss" scoped>
.call-me {
  position: relative;
  z-index: 1;
  &:hover {
    &::after {
      transform: scaleX(1);
    }
  }
  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #ff7242;
    z-index: -1;
    transition: transform 0.5s ease-out;
    transform: scaleX(0);
    transform-origin: left;
  }
}
</style>
